<template>
  <!-- 会员管理 -->
  <div>
    <!-- 搜索 -->
    <div>
      <el-select v-model="input.status" placeholder="选择用户状态" class="sous">
        <el-option label="冻结" value="1" />
        <el-option label="激活" value="0" />
        <el-option label="全部" value />
      </el-select>
      <el-select v-model="input.level" placeholder="选择会员等级" class="sous">
        <el-option label="普通会员" value="0" />
        <el-option label="Vip会员" value="1" />
        <el-option label="全部" value />
      </el-select>
      <el-select v-model="input.gender" placeholder="选择用户性别" class="sous">
        <el-option label="女" value="2" />
        <el-option label="男" value="1" />
        <el-option label="全部" value />
      </el-select>
      <el-input v-model.trim="input.id" placeholder="请输入用户ID" class="sous" />
      <el-input v-model.trim="input.nickname" placeholder="请输入昵称" class="sous" />

      <el-button type="primary" @click="sous(input)">
        <span class="iconfont icon-icon-sousuo" style="margin-right: 10px"></span>查找
      </el-button>
    </div>

    <!-- 表单 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="用户ID" prop="id" sortable align="center" />
      <el-table-column label="昵称" prop="nickname" align="center" />
      <el-table-column label="手机号码" prop="phone" align="center" />
      <el-table-column label="性别" width="180" align="center">
        <template #default="scope">
          <el-tag>{{ scope.row.gender==1?'男':"女" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="会员等级" width="180" align="center">
        <template #default="scope">
          <el-tag>{{ scope.row.level==1?'vip会员':"普通会员" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="生日" prop="birthday" width="180" align="center">
        <template #default="scope">
          <span>{{ scope.row.birthday?time(scope.row.birthday,1):'-'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status?'danger':''">{{ scope.row.status==1?'冻结':'激活' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="上次登录时间" prop="gmtLastLogin" width="180" align="center">
        <template #default="scope">
          <span>{{ scope.row.gmtLastLogin?time(scope.row.gmtLastLogin,1):'-'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="上次登录IP" prop="lastLoginIp" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <!-- 激活 -->
          <el-button size="small" :type="scope.row.status?'primary':'danger'" @click="editStatus(scope.row)">{{ scope.row.status==0?'冻结':'激活' }}</el-button>
          <!-- 对话框 -->
          <el-button type="text" @click="dialogVisible = true">
            <!-- 修改按钮 -->
            <el-button size="small" type="primary" @click="amendnew(scope.$index, scope.row)">修改</el-button>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" title="编辑" width="600px" :before-close="handleClose">
      <!-- 内容 -->
      <el-form :inline="true" :model="addr" class="demo-ruleForm" status-icon label-width="120px">
        <el-form-item label="隐藏的用户ID">
          <el-input v-model.trim="addr.id" placeholder="用户名" disabled=" true " />
        </el-form-item>
        <el-form-item label="用户手机号">
          <el-input v-model.trim="addr.phone" placeholder="手机号码" />
        </el-form-item>
        <el-form-item label="用户密码" prop="pass">
          <el-input v-model="addr.password" type="password" autocomplete="off" placeholder="密码" />
        </el-form-item>
        <el-form-item label="用户性别">
          <el-select v-model="addr.gender" placeholder="请选中所属性别">
            <el-option label="女" :value="2" />
            <el-option label="男" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户等级">
          <el-select v-model="addr.level" placeholder="请选中所属等级">
            <el-option label="普通会员" :value="0" />
            <el-option label="Vip会员" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-select v-model="addr.status" placeholder="请选中所属状态">
            <el-option label="冻结" :value="1" />
            <el-option label="激活" :value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resetForm()">取消</el-button>
        <el-button type="primary" @click="edit()">编辑</el-button>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <paging-vue v-bind="index" @limits="limitv" @pages="pagev"></paging-vue>
  </div>
</template>

<script>
import { post } from '@/utils/http.js' // 引入封装工具

export default {
  data() {
    return {
      index: {
        page: 1, // 分页
        limit: 10, // 每页显示条数
        total: 10 // 总数
      },
      // 输入框
      input: {
        status: null, // 用户状态
        gender: null, // 用户性别
        level: null, // 用户等级
        id: '', // 用户ID
        nickname: '' // 用户名称
      },

      // 弹框数据
      addr: {
        id: '', // 用户ID
        phone: '', // 用户手机号
        password: '', // 用户密码
        gender: '', // 用户性别
        level: '', // 用户等级
        status: '' // 用户状态
      },
      tableData: [], // 数据

      dialogVisible: false, // 弹出框显示/隐藏
      title: '创建'
    }
  },

  created() {
    this.record() // 调用管理者数据接口
  },

  methods: {
    // 时间戳
    time(value, data) {
      // 时间戳转换日期格式方法
      const date = new Date(value)
      const y = date.getFullYear() // 年
      const MM = date.getMonth() + 1 // 月
      const d = date.getDate() // 日
      const h = date.getHours() // 时
      const m = date.getMinutes() // 分
      const birthday = `${y}年${MM}月${d}日`
      const lastLoginIp = `${MM}月${d}日${h}时${m}分`
      return data == 0 ? birthday : lastLoginIp
    },

    // 管理者数据
    record() {
      const data = {
        _gp: 'admin.user', // 请求参数
        _mt: 'list', // 请求参数
        id: this.input.id, // 用户ID
        nickname: this.input.nickname, // 用户昵称
        level: this.input.level, // 用户等级
        gender: this.input.gender, // 用户性别
        status: this.input.status, // 用户状态
        pageNo: this.index.page,
        limit: this.index.limit
      }
      post(data).then((res) => {
        if (res.data.errno == 200) {
          this.tableData = res.data.data.items // 数据
          this.index.total = res.data.data.total // 分页总数
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },

    // 搜索
    sous(input) {
      const add = /^[1-9]\d{2}$/
      if (add.test(input.id)) {
        this.record()
      } else {
        this.input.id = ''
        this.record()
      }

      this.record() // 调用管理者数据接口
    },

    // 激活冻结
    editStatus(row) {
      if (row.status == 0) {
        row.status = 1
      } else {
        row.status = 0
      }
      const data = {
        _gp: 'admin.user', // 请求参数
        _mt: 'editStatus', // 请求参数
        userId: row.id, // 用户信息
        status: row.status // 用户状态
      }
      post(data).then((res) => {
        if (res.data.errno == 200) {
          if (row.status == 0) {
            ElMessage.success('激活成功')
          } else {
            ElMessage.error('冻结成功')
          }
          this.record()
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },

    // 弹框
    handleClose(done) {
      ElMessage({
        type: 'info',
        message: '取消操作！'
      })
        ; (this.dialogVisible = false), this.record()
    },

    // 修改弹窗
    amendnew(index, row) {
      this.dialogVisible = true
      this.addr = row
      this.addr.password = ''
    },
    // 编辑提交
    edit() {
      // 输入判断
      if (!this.verify()) {
        return false
      }
      const data = {
        _gp: 'admin.user', // 请求参数
        _mt: 'edit', // 请求参数
        user: JSON.stringify({ ...this.addr })
      }
      post(data).then((res) => {
        if (res.data.errno == 200) {
          ElMessage.success('修改成功')
          this.dialogVisible = false
          this.record()
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },

    // 取消
    resetForm() {
      ElMessage({
        type: 'info',
        message: '取消操作！'
      })
      this.dialogVisible = false
    },
    // 分页
    limitv(e) {
      this.index.limit = e
      this.record()
    },
    pagev(e) {
      this.index.page = e
      this.record()
    },

    // 验证
    verify() {
      const { password, phone, realname, roleIds } = this.addr
      const phones = /^1[3-9]\d{9}$/ // 手机号正则验证

      // 密码验证
      if (password == '') {
        ElMessage.error('密码不能为空！')
        return false
      }

      // 手机号格式验证
      if (phone == '') {
        ElMessage.error('手机号不能为空！')
        return false
      }

      if (!phones.test(phone)) {
        ElMessage.error('手机号码格式错误！')
        return false
      }
      return true
    }
  }
}
</script>

<style lang="less" scoped>
// 输入框
.el-input {
  width: 350px;
}

// 搜索
.sous {
  width: 13%;
  margin-right: 15px;
  margin-bottom: 15px;
}
</style>
